<template>
	<view class="content">
		<nav-bars backState="1000" :bgColor="navBackground" fontColor="#fff" title="二维码收款"></nav-bars>
		<view class="wrapper">
			<view class="mainBox">
				<view class="paddingBox">
					<view class="top-column flex items-center">
						<image class="icon-title" :src="`${baseImg}/static/adminShop/collectionCode/payment_code.png`"
							mode="widthFix"></image>
						<text>二维码收款</text>
					</view>
					<view class="qrcodeBox">
						<view class="qr-title">
							微信扫一扫向我付款
						</view>
						<view class="qrcode">
							<image :src="code">
							</image>
						</view>
						<view class="qr-download" @click="qrcodeDownload">
							保存收款码
						</view>
					</view>
					<view class="collectionRecord flex items-center"
						@click="goJump('/pages_now/pages/mall/store/orderBill')">
						<image class="iconLeft" :src="`${baseImg}/static/adminShop/collectionCode/record.png`"></image>
						<view class="recordTitle">收款记录</view>
						<image class="more-icon" :src="`${baseImg}/static/adminShop/collectionCode/more.png`"></image>
					</view>
				</view>
			</view>
			<qrcode-poster ref="poster" :title="store_name" subTitle="二维码收款" :primary_price="parseFloat(20.25)"
				headerImg="https://liankun.cos.littlegood.cn/qrcode/2022_03_14_16_18_57_7_bHYhvrldWEuZkuUyPyMt75oADTmgqn9I.png"
				:price="parseFloat(1.25)"></qrcode-poster>
			
		</view>
	</view>
</template>

<script>
	import QrcodePoster from '../../../components/collection-qrcode/zhangyu-qrcode-poster.vue';
	import service_now from '@/service/now.js';
	export default {
		components: {
			QrcodePoster
		},
		data() {
			return {
				baseImg: this.$static,
				navBackground: '',
				qrcode: 'https://liankun.cos.littlegood.cn/qrcode/2022_03_14_16_18_57_7_bHYhvrldWEuZkuUyPyMt75oADTmgqn9I.png',
				store_id: this.$store.state.index.sid, //店铺id
				code: '',
				store_name:'',
			}
		},
		onLoad() {
			this.getpayMent()
			this.getStoreDetail()
		},
		methods: {
          getStoreDetail(){
			  service_now.storeDetail({
			  		store_id: this.store_id
			  	})
			  	.then(res => {
			  		if (res.code == 1) {
			  			this.store_name = res.data.store_name;
			  		}
			  	})
		  },
			//获取收款码
			getpayMent() {
				service_now.getCollectionCode({
						store_id: this.store_id
					})
					.then(res => {
						if (res.code == 1) {
							this.code = res.data;
						}
					})
			},
			//保存二维码
			qrcodeDownload() {
				this.$refs.poster.showCanvas(this.code);
			},
			goJump(url) {
				uni.navigateTo({
					url: url
				})
			}
		},
	
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;
		height: 100vh;
		background-color: #CB9439;

		.wrapper {
			.mainBox {
				width: 92%;
				margin: 52rpx auto;
				height: 880rpx;
				background: #FFFFFF;
				border-radius: 24rpx;

				.paddingBox {
					width: 94%;
					margin: auto;

					.top-column {
						width: 100%;
						height: 100rpx;
						padding-top: 30rpx;

						.icon-title {
							width: 38rpx;
							height: 46rpx;
							margin: 10rpx;
						}

						text {
							color: #101010;
							font-weight: 550;
						}
					}

					.qrcodeBox {
						margin-top: 100rpx;
						align-items: center;

						.qr-title {
							text-align: center;
							height: 50rpx;
							color: #343029;
						}

						.qrcode {
							width: 340rpx;
							height: 340rpx;
							margin: 40rpx auto;

							image {
								width: 100%;
								height: 100%;
							}
						}

						.qr-download {
							color: #817E75;
							text-align: center;
							margin-top: 28rpx;
						}
					}

					.collectionRecord {
						width: 100%;
						height: 100rpx;
						margin-top: 50rpx;

						.iconLeft {
							width: 42rpx;
							height: 42rpx;
						}

						.recordTitle {
							font-size: 32rpx;
							color: #08131A;
							text-indent: 20rpx;
						}

						.more-icon {
							margin-left: auto;
							margin-right: 0px;
							width: 16rpx;
							height: 20rpx;
							vertical-align: middle;
						}
					}
				}

			}
		}

	}
</style>
